<template>
	<view class="loading" v-if="isShowLoading">
		<div class="box"><span></span></div>
		<div class="loading-text">加载中...</div>
	</view>
</template>

<script>
	export default {
		props: {
			isShowLoading: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		display: flex;

		.loading-text {
			line-height: 90rpx;
			font-size: 26rpx;
			color: #949494;
		}
	}

	.box {
		text-align: center;
		width: 50rpx;
		height: 90rpx;
		margin: 0 0 0 20rpx;
	}

	.box>span {
		animation: loader 1000ms infinite linear;
		border-radius: 100%;
		border: 4rpx solid #949494;
		border-left-color: transparent;
		color: transparent;
		display: inline-block;
		line-height: 1.2;
		width: 30rpx;
		height: 30rpx;

		margin-top: 30rpx;
	}

	@keyframes loader {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>